<template>
  <div class='base-info pr'>
    <Title :info="{title:'基本信息'}" />
    <div v-if="true" class="btns pa">
      <el-button v-if="!isEditing" class="btn" type="primary" @click="isEditing=true">编辑</el-button>
      <el-button v-else class="btn" type="danger" @click="save">保存</el-button>
      <el-button  class="btn" type="primary" @click="exportData">导出</el-button>
    </div>
    <div>
      <el-upload
        class="avatar-uploader"
        :action="uploadUrl"
        :show-file-list="false"
        :on-success="handleAvatarSuccess">
        <img title="更换照片" v-if="info.photo" :src="info.photo" class="avatar">
        <img title="更换照片" v-else :src="defaultImg" class="avatar">
      </el-upload>
      <div class="content pr">
        <p v-for="(item, index) in userData" :key="index">
          <span class="width200" v-for="(opt, index) in item" :key="index">
            <span>{{opt.label}}：</span>
            <span><span v-if="!isEditing">{{info[opt.key]}}</span><el-input v-else v-model="info[opt.key]" placeholder="请输入内容"></el-input></span>
          </span>
        </p>
      </div>
    </div>

  </div>
</template>
<script>
import Title from './title'
export default {
  components: {Title},
  name: "",
  data() {
    return {
      uploadUrl:PATH+'index/upload',
      info:{
        photo:""
      },
      isEditing:false,

      userData:[
        [
          {key:"division",label:"科室"},
          {key:"name",label:"姓名"},
          {key:"sex",label:"性别"},
        ],
        [
          {key:"birthday",label:"出生日期"},
          {key:"age",label:"AGE"},
          {key:"birthplace",label:"籍贯"}
        ],
        [
          {key:"nation",label:"民族"},
          {key:"party",label:"政治面貌"},
          {key:"party_time",label:"入党时间"}
        ],[
          {key:"identity",label:"身份证号"},
          {key:"tel",label:"联系电话"},
          {key:"emergency_tel",label:"紧急联系电话"}
        ],[
          {key:"address",label:"家庭住址"},
          {key:"work_time",label:"参加工作时间"},
          {key:"school_time",label:"入校时间"}
        ],[
          {key:"school_finish",label:"毕业时间"},
          {key:"education",label:"学历及毕业时间"},
          {key:"degree",label:"学位及毕业时间"}
        ],[
          {key:"profession",label:"职称"},
          {key:"lead",label:"是否硕导"},
          {key:"tutorship",label:"是否博导"}
        ],[
          {key:"specialty",label:"专业编制"},
          {key:"specialty_type",label:"编制类型"},
          {key:"duty",label:"职务"}
        ],[
          {key:"grade",label:"职务级别"},
          {key:"credentials",label:"持证情况"},
          {key:"email",label:"邮箱"}
        ]
      ],
      
      defaultImg:require("../../../../resource/imgs/header.jpg")
    };
  },
  methods: {
    getListData(){
      _g.apiPost("teacherinfo/getinfo",{number:_g.getRouterParams(this).number}).then(res=>{
        this.$set(this,"info",res.data)
      })
    },
    handleAvatarSuccess(res,file){
      this.info.photo = URL.createObjectURL(file.raw);
    },
    save(){
      var params=this.info
      _g.apiPost("teacherinfo/change",params).then(res=>{
        _g.toastMsg(res.code!=0?"error":"success",res.msg)
        this.isEditing=false
      })
    },

    exportData(){
      _g.apiPost("teacherinfo/exportmyinfo").then(res=>{
        _g.toastMsg(res.error?"error":"success",res.msg)
        if(!res.error)location.href=res.data
      })
    }
  },
  created() {
    _g.getRouterParams(this).number?this.info=this.$store.state.dia.center.info:this.getListData()
  }
};
</script>
<style scoped>
.base-info {
  box-shadow: 1px 1px 10px 1px #eee;
  padding: 10px 30px 30px;
}
.base-info>div{
  display: flex;
}
img{
  width: 120px;
  height: 120px;
}
.content{
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  font-size: 12px;
  color: #333;
  padding-top: 0;
  padding-bottom: 0;
}
.content p{
  line-height: 30px;
}

.width200{
  display: inline-block;
  width: calc(100% / 3 - 20px);
  margin-right: 10px;
}
.btns{
  top: 20px;
  right: 20px;
  z-index: 100;
}
.btn{
  height: 30px;
  line-height: 30px;
  padding: 0 20px;
}
</style>